<template>
	<div class="login">
		<div class="login-warrp" @click.stop="closeLog">
			<div class="form" @click.stop="stopDefault">
				<div class="form-item vux-1px-b">
					<div class="iconfont">&#xe602;</div>
					<input v-model="phone" type="number" placeholder="请输入手机号"/>
				</div>
				<div class="form-item vux-1px-b">
					<div class="iconfont">&#xe6b4;</div>
					<input v-model="valiCode" type="number" placeholder="请输入验证码"/>
					<div class="vali-btn vux-1px-l" @click.stop="getValiCode">获取验证码</div>
				</div>
				<p class="err-tip">{{errTip}}</p>
				<div class="login-btn" @click.stop="submitVal">登录</div>
				<span class="close" @click="closeLog">&times;</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	export default{
	 	data(){
	 		return{
	 			phone : '',
	 			valiCode : '',
	 			timer    : null,
	 			errTip   : ''
	 		}
	 	},
	 	props:{
	 		param:{
	 			type:String
	 		}
	 	},
	 	methods:{
	 		closeLog(){
	 			this.valiCode = ''
	 			this.$emit('close')
	 		},
	 		getValiCode(e){
	 			if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)){
	 				this.errTip = '* 请输入正确的手机号'
	 				return
	 			}	 				
	 			let time = 60
	 			if(e.target.innerText !== '获取验证码'){
	 				return
	 			}
	 			if(this.timer){
	 				clearInterval(this.timer)
	 			}
	 			this.timer = setInterval(() => {
	 				e.target.innerText = --time
	 				if(e.target.innerText == '0'){
	 					e.target.innerText = '获取验证码'
	 					clearInterval(this.timer)
	 				}
	 			},1000)
	 			this.$axiosPostn('/utils/sms/sendcode.json',{
	 				phone : this.phone,
	 				type  : 7
	 			}).then(res => {
	 				
	 			})
	 		},
	 		submitVal(){
//	 					 	setCookie('uid','123',30)
//		 					setCookie('token','sjlfjsdfjslkdjfk',30)
//		 					console.log(this.param)
//		 					this.$emit('closeP','success',this.param)
//		 					this.closeLog()
//		 					this.$vux.toast.text('登录成功','top')
//		 					if(this.param === 'shoplist'){
//		 						this.$router.push('/setting')
//		 					}
//				 			if(this.param === 'create'){
//				 				this.$router.push('/createStore')
//				 			}
	 			let result = this.valiForm()
	 			if(result.status){
	 				this.$axiosPostn('/account/bindmobile.json?from=webconsole',{
		 				phone    : this.phone,
		 				smscode  : this.valiCode
		 			}).then( res => {
		 				if(res.code == 200){
		 					setCookie('uid',res.data.uid,30)
		 					setCookie('token',res.data.token,30)
		 					console.log(this.param)
		 					this.$emit('closeP','success',this.param)
		 					this.closeLog()
		 					this.$vux.toast.text('登录成功','top')
		 					if(this.param === 'shoplist'){
		 						this.$router.push('/setting')
		 					}
				 			if(this.param === 'create'){
				 				this.$router.push('/createStore')
				 			}
		 				}
		 				if(res.code == 404){
		 					this.errTip = res.msg || '验证码错误'
		 				}
		 			})
	 			}else{
	 				this.errTip = result.msg
	 			}

	 		},
	 		stopDefault(){
	 			return
	 		},
	 		valiForm(){
	 			let result = {
	 				status : false,
	 				msg    : ''
	 			}
	 			if(!this.phone){
	 				result.msg = '* 请输入手机号'
	 				return result
	 			}
	 			if(!this.valiCode){
	 				result.msg = '* 请输入验证码'
	 				return result
	 			}
	 			result.status = true
	 			return result
	 		}
	 	}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	.login-warrp{
		z-index: 199;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: rgba(0,0,0,.6);
		.form{
			position:relative;
			padding:.6rem .2rem;
			margin: 0 auto;
			width: 80%;
			background: #fff;
			border-radius:.2rem;
			.form-item{
				position: relative;
				display:flex;
				height: 1.1rem;
				.iconfont{
					position:absolute;
					top:0;
					left:0;
					flex:1;
					line-height:1.1rem;
					font-size:.44rem;
					color:#fc89a5;
				}
				input{
					padding-left: .5rem;
					height:.4rem;
					margin-top: .35rem;
					border:none;
				}
				.vali-btn{
					margin-top: .35rem;
					padding-left: .3rem;
					text-align: center;
					width: 2.6rem;
					height: .4rem;
					color: #fb7d44;	
					font-size: .2rem;				
				}
			}
			.err-tip{
				padding-left: .2rem;
				line-height: .66rem;
				height: .66rem;
				color: #fb4b52;
			}
			.login-btn{
				margin: .1rem auto;
				margin-bottom: 0;
				width: 3.2rem;
				height: .8rem;
				text-align: center;
				line-height: .8rem;
				color: #fff;
				background: #fb4b52;
				border-radius: .1rem;
			}
			.close{
				position: absolute;
				top: .1rem;
				right: .2rem;
				display: inline-block;
				height: .28rem;
				width: .28rem;
				line-height: .28rem;
				text-align: center;
				font-size: .28rem;
			}
		}
	}
</style>